
@import "@/commin/commin.less";

page {
    width: @percent;
    height: @percent;
    position: relative;
    background-color: @text-color6;
}

.search {
    overflow: hidden;
    position: fixed;
    top: 0;
    width: 698rpx;
    z-index: 99;
    background-color: @white-color;
    align-items: center;
    .paddings(17rpx, 32rpx, 24rpx, 26rpx);
    border-bottom: 1rpx solid @text-color5;
	
	&.search-wrap {
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
	}
	.title {
		font-size: 34rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #1A1A1A;
		text-align: center;
	}

	.search_box {
	    display: flex;
		align-items: center;
		font-family: PingFang SC;
		font-weight: 500;

		.location {
		    display: flex;
		    align-items: center;
			width: 110rpx;

		    .city_name {
		        font-size: 26rpx;
		        color: @text-color2;
		        width: 100rpx;
		        overflow: hidden; //溢出隐藏
		        white-space: nowrap; //禁止换行
		        text-overflow: ellipsis; //...
		    }
		    .icon {
		        .kuangao(25rpx, 25rpx);
				margin-left: 8rpx;
		    }
		}
		.search_input {
			flex: 1;

			.weui-search-bar {
				display: flex;
				padding: 0 24rpx;
			}

			.weui-icon-search {
				margin-right: 8px;
				font-size: inherit;
			}

			.weui-icon-search_in-box {
				position: absolute;
				left: 10rpx;
				top: 12rpx;
			}

			.weui-search-bar__text {
				display: inline-block;
				font-size: 14px;
				vertical-align: middle;
			}

			.weui-search-bar__form {
				flex: auto;
				background: #FFFFFF;
				border: 1rpx solid rgba(231, 242, 250, 0.5);
				box-shadow: 1rpx 4rpx 20rpx 0rpx rgba(139, 153, 167, 0.2);
				opacity: 0.9;
				border-radius: 35rpx;
				.paddings(8rpx, 10rpx, 8rpx, 24rpx);
			}

			.weui-search-bar__box {
				position: relative;
				padding-left: 30px;
				padding-right: 30px;
				width: 100%;
				box-sizing: border-box;
				z-index: 1;
			}

			.weui-search-bar__input {
				height: 28px;
				line-height: 28px;
				font-size: 14px;
			}

			.weui-icon-clear {
				position: absolute;
				top: 0;
				right: 0;
				padding: 7px 8px;
				font-size: 0;
			}

			.weui-search-bar__label {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				z-index: 2;
				border-radius: 3rpx;
				text-align: center;
				color: #9B9B9B;
				background: #FFFFFF;
				line-height: 28px;
			}

			.weui-search-bar__cancel-btn {
				margin-left: 10px;
				line-height: 28px;
				color: #09BB07;
				white-space: nowrap;
				font-size: 30rpx;
			}
		}
		.search_btn {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 60rpx;

			text {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: var(--textColor);
			}
		}
	}

    .img {
        width: 44rpx;
        height: 44rpx;
        margin-top: 26rpx;
    }

    .tipInfo {
        .kuangao(14rpx, 14rpx);
        .position(absolute, 15rpx, 38rpx, 0, auto);
        .borderradius(7rpx, 7rpx, 7rpx, 7rpx);
        background: @orange;
    }

    .search_txt {
        .fontsize(30rpx);
        font-family: PingFang SC;
        font-weight: bold;
        color: @blue;
        margin-left: 23rpx;
    }

    .screen {
        display: flex;
		justify-content: space-between;
		text-align: center;
        margin-top: 24rpx;

		.nav {
			display: flex;
			align-items: center;
			.fontsize(28rpx);
			margin: 0 -24rpx;

			.nav-item {
				margin: 0 24rpx;

				&.activite {
					.fontsize(34rpx);
					font-weight: bold;
					color: @blue;
				}
			}
		}

		.all {
		    display: flex;
			align-items: center;
		    color: #303133;

		    .icon {
		        .kuangao(25rpx, 25rpx);
		        margin-right: 11rpx;
		    }
			text {
				.fontsize(28rpx);
				margin: 0;
			}
		}


        .region {
            align-items: center;
            margin-left: 190rpx;
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color1;

            .regionImg {
                .kuangao(20rpx, 20rpx);
                .margins(0, 80rpx, 0, 7rpx);
            }
        }

        .region1 {
            align-items: center;
            margin-left: 100rpx;
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color1;

            .regionImg1 {
                .kuangao(20rpx, 20rpx);
                .margins(0, 0rpx, 0, 7rpx);
            }
        }

        .preference {
            align-items: center;
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color1;
            margin-left: 10rpx;

            .preferenceImg {
                .kuangao(20rpx, 20rpx);
                margin-left: 7rpx;
            }
        }

        .siteList {
            .kuangao(150rpx, 56rpx);
            .lineheight(56rpx);
            position: absolute;
            margin-top: -12rpx;
            right: 32rpx;
            background: rgba(20, 135, 250, 0.08);
            text-align: center;
            .borderradius(28rpx, 28rpx, 28rpx, 28rpx);
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @blue;

            .siteListImg {
                .kuangao(24rpx, 25rpx);
                margin-right: 8rpx;
            }
        }
    }
}

.search .tool {
    width: 750rpx;
    height: 50px;
    display: flex;
    align-items: center;
}

.search .tool .area {
    height: 40px;
    width: 150rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search .tool .area text {
    font-size: 28rpx;
    color: #092E48;
    font-weight: 500;
    margin: 0 5rpx 0 0;
}

.search .tool .area image {
    width: 24rpx;
    height: 6px;
}

.search .tool .tsearch {
    width: 490rpx;
    height: 35px;
    border-radius: 35rpx;
    background: #F5F6FA;
    display: flex;
    align-items: center;
}

.search .tool .tsearch image {
    width: 31rpx;
    height: 15px;
    margin: 0 10rpx;
}

.search .tool .tsearch text {
    color: #B3B5BE;
    font-size: 28rpx;
}

.search .tool .news {
    width: 100rpx;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.search .tool .news text {
    font-size: 30rpx;
    color: #101734;
}

.search .selectDis {
    width: 690rpx;
    margin: 0 auto;
    height: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.search .selectDis .radio_distance {
    padding: 0 25rpx;
    height: 25px;
    border: 1px solid #888888;
    border-radius: 30rpx;
    font-size: 13px;
    color: #888888;
    line-height: 25px;
    text-align: center;
}

.search .selectDis .distance_checked {
    border: 1px solid #01CA7E;
    color: #01CA7E;
}





.mask {
    width: @percent;
    height: @percent;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 110;
    overflow: hidden;
}

text {
    margin: 5px 0;
    display: block;
    font-size: 12px;
}

.h1 {
    margin: 15px 0;
    font-size: 15px;
}

.stationCharging {
    position: absolute;
    bottom: 164rpx;
    left: 32rpx;
    text-align: center;
    .kuangao(100rpx, 100rpx);
    background: @white-color;
    box-shadow: 0rpx 6rpx 28rpx 0rpx rgba(196, 203, 210, 0.48);
    opacity: 0.9;
    border-radius: 50%;

    image {
        .kuangao(36rpx, 29rpx);
        margin-top: 23rpx
    }

    .txt {
        .fontsize(20rpx);
        font-family: PingFang SC;
        font-weight: 400;
        color: #707485;
    }
}

.chargingType {
    position: absolute;
    top: 25%;
    left: 32rpx;
    background: @white-color;
    box-shadow: 0rpx 6rpx 28rpx 0rpx rgba(196, 203, 210, 0.48);
    opacity: 0.9;
    .borderradius(16rpx, 16rpx, 16rpx, 16rpx);
    .kuangao(178rpx, 234rpx);

    .tagging0 {
        .paddings(32rpx, 0, 0, 27rpx);
        display: flex;
        align-items: center;
        .fontsize(24rpx);
        font-family: PingFang SC;
        font-weight: 400;
        color: #5C5F66;
        padding-bottom: 10rpx;
        border-bottom: 1rpx solid #DCDFE6;

        .img {
            .kuangao(27rpx, 28rpx);
            margin-top: 6rpx;
        }

        .txt0 {
            .margins(0, 15rpx, 0, 12rpx);
        }
    }

    .chargingTypeItem {
        display: flex;
        align-items: center;
        margin: 14rpx 0 0 27rpx;

        .img {
            .kuangao(27rpx, 28rpx);
            margin-top: 6rpx;
        }

        .txt {
            .fontsize(24rpx);
            font-family: PingFang SC;
            font-weight: 400;
            color: #5C5F66;
            .margins(0, 15rpx, 0, 12rpx);
        }
    }

    .checktype {
        .kuangao(19rpx, 14rpx);
    }
}

.pop_top {
    .margins(102rpx, 0, 200rpx, 0);
    .type_btn {
        display: flex;
        justify-content: center;
        position: fixed;
        bottom: 0;
        width: @percent;
        background: #fff;
        padding: 49rpx 0;
        align-items: center;

        .btn1 {
            .kuangao(270rpx, 88rpx);
            .lineheight(88rpx);
            .borders(1rpx, @text-color4);
            text-align: center;
            .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color4;
        }

        .btn2 {
            .kuangao(270rpx, 88rpx);
            .lineheight(88rpx);
            text-align: center;
            margin-left: 50rpx;  
            // background: linear-gradient(105deg, #2B99FF, var(--textColor));
            // box-shadow: 0px 3px 6px 0px rgba(0, 110, 212, 0.3);
            .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @white-color;
        }
    }
}

.pop_top1 {
    .margins(180rpx, 0, 160rpx, 0);

    .area {
        display: flex;
        flex-wrap: wrap;
        .paddings(16rpx, 24rpx, 0rpx, 26rpx);

        .areaItem {
            .kuangao(160rpx, 64rpx);
            .lineheight(64rpx);
            text-align: center;
            background: @text-color6;
            .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color3;
            .margins(24rpx, 14rpx, 0, 0);
            overflow: hidden; //溢出隐藏
            white-space: nowrap; //禁止换行
            text-overflow: ellipsis; //...
        }

        .areaItem_sel {
            .kuangao(160rpx, 64rpx);
            .lineheight(64rpx);
            text-align: center;
            background: rgba(20, 135, 250, 0.06);
            .borders(1rpx, @blue);
            .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @blue;
            .margins(24rpx, 14rpx, 0, 0);
            overflow: hidden; //溢出隐藏
            white-space: nowrap; //禁止换行
            text-overflow: ellipsis; //...
        }
    }

    .comprehensive {
        .paddings(41rpx, 24rpx, 0rpx, 26rpx);

        .comprehensiveItem {
            display: flex;
            justify-content: space-between;
            margin-bottom: 56rpx;
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color3;
        }

        .comprehensiveItem_sel {
            display: flex;
            justify-content: space-between;
            margin-bottom: 56rpx;
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @blue;

            .comprehensiveImg {
                .kuangao(28rpx, 23rpx);
            }
        }
    }

    .type_btn {
        display: flex;
        justify-content: center;
        position: fixed;
        // bottom: 20%;
        width: @percent;
        background: #fff;
        padding: 49rpx 0;
        align-items: center;

        .btn1 {
            .kuangao(270rpx, 88rpx);
            .lineheight(88rpx);
            .borders(1rpx, @text-color4);
            text-align: center;
            .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @text-color4;
        }

        .btn2 {
            .kuangao(270rpx, 88rpx);   
            .lineheight(88rpx);
            text-align: center;
            margin-left: 50rpx;
            // background: linear-gradient(105deg, #2B99FF, var(--textColor));
            // box-shadow: 0px 3px 6px 0px rgba(0, 110, 212, 0.3);
            .borderradius(44rpx, 44rpx, 44rpx, 44rpx);
            .fontsize(30rpx);
            font-family: PingFang SC;
            font-weight: bold;
            color: @white-color;
        }
    }
}

.type {
    .margins(39rpx, 0, 0, 35rpx);

    .type_title {
        .fontsize(34rpx);
        font-family: PingFang SC;
        font-weight: bold;
        color: @text-color2;
    }

    .type_list {
        display: flex;
        flex-wrap: wrap;

        .type_itme {
            .kuangao(160rpx, 64rpx);
            padding: 0 28rpx;
            box-sizing: border-box;
            height: 64rpx;
            .lineheight(64rpx);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            .margins(24rpx, 16rpx, 0, 0);
            text-align: center;
            background: @text-color6;
            .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: 500;
            color: @text-color3;
        }

        .type_itme_sel {
            .kuangao(160rpx, 64rpx);
            .lineheight(64rpx);
            padding: 0 18rpx;
            box-sizing: border-box;
            height: 64rpx;
            .margins(24rpx, 16rpx, 0, 0);
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            -o-text-overflow: ellipsis;
            text-align: center;
            background: rgba(20, 135, 250, 0.06);
            .borderradius(32rpx, 32rpx, 32rpx, 32rpx);
            .fontsize(28rpx);
            font-family: PingFang SC;
            font-weight: bold;
            .borders(1rpx, @blue);
            color: @blue;
        }
    }
}

.p-category {
    height: 100vh;
    display: flex;
    flex-direction: column;

    &-header {
        background: #fff;

        &-wrap {
            display: flex;
            align-items: center;
            padding: 20rpx 0 32rpx;
            height: 104rpx;
        }

        .icon {
            width: 48rpx;
            height: 48rpx;
            display: block;
            padding: 0 16rpx 0 32rpx;
        }

        .title {
            font-size: 40rpx;
            font-weight: 600;
            color: #121a1e;
            line-height: 56rpx;
        }
    }

    &-container {
        flex: 1;
        display: flex;
        overflow: hidden;
        // height: calc(80% - 106rpx);
        ;
        background-color: #F5F7FA;
    }

    &-left {
        .kuan(220rpx);
    }

    &-menu {
        height: 80%;
        z-index: 1;

        &-item {
            .paddings(23rpx, 0, 23rpx, 0);
            text-align: center;
            background: #F5F7FA;
            transition: all 0.3s linear;
            position: relative;
            border-bottom: 2rpx solid @white-color;

            &-label1 {
                .fontsize(26rpx);
                .margins(23rpx, 0, 19rpx, 0);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color3;
            }

            &-label2 {
                .fontsize(26rpx);
                font-family: PingFang SC;
                font-weight: 500;
                color: @text-color4;
            }

            &-line {
                width: 8rpx;
                height: 36rpx;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
            }

            &.active {
                background: @white-color;
                .borderradius(16rpx, 0rpx, 0rpx, 0rpx);

                .p-category-menu-item-label {
                    .fontsize(28rpx);
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: @text-color3;
                }
            }
        }
    }

    &-right {
        .kuan(calc(@percent - 220rpx));
        background: @white-color;
        .borderradius(0rpx, 16rpx, 16rpx, 0rpx);

        &-scroll {
            box-sizing: border-box;
        }
    }

    &-store {
        display: flex;
        align-items: center;
        width: @percent;
        padding: 0 0 40rpx 32rpx;

        &-label {
            font-size: 26rpx;
            font-weight: bold;
            color: #7b8082;
            line-height: 44rpx;
            padding-right: 40rpx;
            white-space: nowrap;

            &.on {
                font-size: 30rpx;
                color: #121a1e;
            }
        }
    }

    &-first {
        .paddings(0, 32rpx, 0rpx, 24rpx);

        &-label {
            font-size: 30rpx;
            font-weight: 600;
            color: #121a1e;
            line-height: 44rpx;
            padding-bottom: 24rpx;
        }
    }

    &-second {
        .paddings(30rpx, 0rpx, 24rpx, 0px);
        .fontsize(28rpx);
        font-family: PingFang SC;
        font-weight: 500;
        color: @text-color3;
    }
}

.noList {
    text-align: center;
    font-size: 24rpx;
    color: #9699A6;
    padding: 24rpx;
}
.content_list {
	    height: 800rpx;
	    overflow-x: hidden;
	    .scroll_view_style{
			height: 100%;
		}
	}
	.content_list_Region {
		    height: 400rpx;
		    overflow-x: hidden;
		    .scroll_view_style{
				height: 100%;
			}
		}
